<template>
	<div class="fillcontain">
		<div class="contain" ref="contain">
			<div class="errPage-container cflex wflex">
				<img class="errorImg" :src="errorImg" />
				<p class="errorTitle">401</p>
				<p class="errorTro">抱歉,您没有权限访问该页面。</p>
				<router-link :to="{path: '/'}">
					<el-button size="mini" type="primary">返回首页</el-button>
				</router-link>
			</div>
		</div>
		name: {{msg1}}
	</div>
</template>

<script>
	import errorImg from "@/assets/img/401.png"
	// import * as mutils from '@/utils/mUtils'

	export default {
		name: 'page401',
		data() {
			return {
				errorImg: errorImg,
				name: ""
			}
		},
		mounted() {
			// mutils.setContentHeight(this,this.$refs.contain,250);

		},
		computed: {
			msg1() {
				this.name = this.$store.getters.name
				return this.name
				// return this.msg.toUpperCase();
			}
		},
		methods: {}
	}
</script>

<style lang="less" scoped>
	.contain {
		display: flex;
		justify-content: center;
		padding: 20px;

		.errPage-container {
			align-items: center;

			p {
				line-height: 30px;
			}

			.errorImg {
				width: 286px;
				height: 325px;
				margin-bottom: 10px;
			}

			.errorTitle {
				color: rgba(0, 0, 0, .85);
				font-size: 24px;
			}

			.errorTro {
				color: rgba(0, 0, 0, .45);
				font-size: 14px;
			}

			a {
				text-decoration: underline;
			}

			.rows {
				height: 100%;

				.el-col {
					text-align: center;
					height: 100%;
				}

				.title {
					font-size: 170px;
					line-height: 1.2;
					color: #a9d86e;
				}

				.neirongItem {
					height: 100%;
					display: flex;
					justify-content: center;
					flex-direction: column;

					.tip {
						font-size: 30px;
						font-weight: bold;
						text-align: left;
					}

					.neirong {
						font-size: 20px;
						text-align: left;
					}
				}
			}

			.home {
				text-align: center;
			}

			.router-link-active:hover {
				color: #a9d86e;
				text-decoration: underline;
			}
		}
	}
</style>
